<script>
import citySelect from "../components/citySelect.vue"
import Demand from "../enum/Demand"
import upload from '@/components/upload.vue'
import Modal from '../components/Modal.vue'
import serviceForm2 from './serviceForm2.vue'
export default {
	components: {
		citySelect, upload, Modal, serviceForm2
	},
	data() {
		return {
			//{{$t('需求')}}枚举
			Demand,
			//全地址
			fullAddress: "",
			//{{$t('报关城市')}}对象,包含id和label
			baoCity: {
				id: "",
				label: "",
				status: true
			},
			//{{$t('转关城市')}}数组,包含id和label
			zhuanCityList: [
				{ id: '', label: '' }
			],
			//{{$t('清关城市')}}对象,包含id和label
			qingCity: {
				id: "",
				label: "",
				status: true
			},
			testShow: false
		}
	},
	methods: {
		back() {
			// uni.navigateBack()
			this.cback()
		},
		submit() {
			console.log(this.$store.state.publishCommonBody.demand);
			//有{{$t('报关')}} 判断{{$t('报关')}}对象
			if (this.$store.state.publishCommonBody.demand.split(',').map(Number).includes(Demand.BAOGUAN) && !this.baoCity.id && this.baoCity.status) {
				uni.showToast({
					title: this.$t('请选择报关城市'),
					icon: 'none'
				})
				return
			}
			//有{{$t('转关')}} 判断{{$t('转关')}}对象
			if (this.$store.state.publishCommonBody.demand.split(',').map(Number).includes(Demand.ZHUANGUAN)) {
				console.log(JSON.parse(JSON.stringify(this.zhuanCityList)));
				for (let i = 0; i < this.zhuanCityList.length; i++) {
					if (!this.zhuanCityList[i].id) {
						uni.showToast({
							title: this.$t('请选择转关城市'),
							icon: 'none'
						})
						return
					}
				}
			}
			//有清关 判断清关对象
			if (this.$store.state.publishCommonBody.demand.split(',').map(Number).includes(Demand.QINGGUAN) && !this.qingCity.id && this.qingCity.status) {
				console.log(JSON.parse(JSON.stringify(this.qingCity)));
				uni.showToast({
					title: this.$t('请选择清关城市'),
					icon: 'none'
				})
				return
			}


			// return ;
			console.log({
				baoCity: this.baoCity,
				zhuanCityList: this.zhuanCityList,
				qingCity: this.qingCity
			},'通关服务信息')
			//确定
			this.$emit('confirm', {
				baoCity: this.baoCity,
				zhuanCityList: this.zhuanCityList,
				qingCity: this.qingCity
			})
		},
		del(index, item) {
			if (item.id) {
				uni.showModal({
					title: this.$t('提示'),
					content: '确定要删除吗？',
					success: (res) => {
						if (res.confirm) {
							this.zhuanCityList.splice(index, 1)
						}
					}
				})
			} else {
				this.zhuanCityList.splice(index, 1)
			}
		},
		log(e) {
			console.log(e);
		},
		onServiceConfirm(id) {
			if (id) {
				this.$store.state.publishCommonBody.clearance_id = id
			}
			this.testShow = false
		}
	}
}
</script>
<template>
	<view class="h-full">
		<!-- <div style="height: 50rpx;background:#fff"></div>
			<div class="header">
				<div class="back center" @click="back">
					<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
				</div>
				{{$t('通关服务')}}
			</div> -->

		<Modal :show.sync="testShow" :title="$t('货物通关信息')">
			<serviceForm2 @confirm="onServiceConfirm" />
		</Modal>


		<view class="p-30 h-full" style="background-color: #F6F7FB;height: auto;min-height: 100%;">

			<!-- 报关 -->
			<div v-if="$store.state.publishCommonBody.demand.split(',').map(Number).includes(Demand.BAOGUAN)"
				class="bg-white rounded-26 p-20 mb-20" :class="{ 'op': !baoCity.status }">
				<div class="between">
					<div class="flex">
						<switch :checked="baoCity.status" @change="e => {
							baoCity.status = e.detail.value;
						}" color="#60E089" style="transform: scale(.7);margin-left: -15rpx;" />
						<div class="font-bold">{{$t('报关')}}
							<text class="fz22 text-red ml-10" v-if="!baoCity.status">({{$t('已禁用')}})</text>
						</div>
					</div>

					<!-- <div class="fz28  pt-10 pb-10 pl-30 pr-30 bg-primary text-white rounded-40 relative"
						style="position: relative;">
						<citySelect :text="baoCity.label" @confirm="e => {
							baoCity.id = e.column3.value;
							baoCity.label = e.column1.label + '-' + e.column2.label + '-' + e.column3.label;
						}" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;" />
						{{ baoCity.label ? $t('重新选择') : $t('选择城市') }}
					</div> -->
					<city is_all="true" :value="baoCity.id" @change="e => {
						baoCity.id = e.column3.value;
						baoCity.label = e.column2.value == -1 || e.column3.value == -1 ?
									[e.column1.label, e.column2.label.replace('全部', ''), e.column3.label.replace('全部', '')].filter(item => item).join(',') :
									e.column3.label;
					}" >
						<div class="fz28  pt-10 pb-10 pl-30 pr-30 bg-primary text-white rounded-40 relative"
							style="position: relative;">
							{{ baoCity.label ? $t('重新选择') : $t('选择城市') }}
						</div>
					</city>
				</div>
				<div style="height: 1rpx;background-color: #F0F0F0;margin: 20rpx 0;"></div>
				<div class="flex fz28 text-333">
					{{ baoCity.label }}
					<!-- {{ baoCity.id }} {{ baoCity.status }} -->
				</div>
			</div>

			<!-- 转关列表 -->
			<template v-if="$store.state.publishCommonBody.demand.split(',').map(Number).includes(Demand.ZHUANGUAN)">

				<div class="w-full center font-bold mb-30 fz28" v-if="zhuanCityList.length > 0">{{$t('转关列表')}}</div>
				<div class="bg-white rounded-26 p-20 mb-20" v-for="(item, index) in zhuanCityList">
					<div class="between">
						<div class="flex">
							<div class="font-bold">{{ index + 1 }}. {{$t('转关')}}</div>
						</div>

						<!-- <div class="fz28  pt-10 pb-10 pl-30 pr-30 bg-primary text-white rounded-40 relative"
							style="position: relative;">
							<citySelect :text="item.label" @confirm="e => {
								item.id = e.column3.value;
								item.label = e.column1.label + '-' + e.column2.label + '-' + e.column3.label;
							}" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;" />
							{{ item.label ? $t('重新选择') : $t('选择城市') }}
						</div> -->

						<city is_all="true" :value="item.id" @change="e => {
							item.id = e.column3.value;
							item.label = e.column2.value == -1 || e.column3.value == -1 ?
									[e.column1.label, e.column2.label.replace('全部', ''), e.column3.label.replace('全部', '')].filter(item => item).join(',') :
									e.column3.label;
						}">
							<div class="fz28  pt-10 pb-10 pl-30 pr-30 bg-primary text-white rounded-40 relative"
								style="position: relative;">
								{{ item.label ? $t('重新选择') : $t('选择城市') }}
							</div>
						</city>
					</div>
					<div style="height: 1rpx;background-color: #F0F0F0;margin: 20rpx 0;"></div>
					<div class="between">
						<div class="flex fz28 text-333">
							{{ item.label }}
							<!-- {{ item.id }} -->
							<text class="fz24 text-gray-600 ml-10" v-if="!item.id">{{$t('未选择城市')}}</text>
						</div>
						<!-- 删除 -->
						<div class="fz28 text-red flex mr-20" @click="del(index, item)">
							<image src="/static/icon/del2.png" mode="widthFix" class="w-30 mr-10 " />
							{{$t('删除')}}
						</div>
					</div>
				</div>

				<!-- 添加转关 -->
				<div class="center">
					<div class="center mb-30 bg-white pt-15 pb-15 pl-25 pr-25 fz26 rounded-40 add" @click="() => {
						zhuanCityList.push({ id: '', label: '' })
					}" style="border: 1px solid #ddd;">
						<image src="/static/icon/add.png" mode="widthFix" class="w-30 mr-10 mt-3" />
						{{$t('添加转关')}}
					</div>
				</div>
			</template>

			<!-- 清关 -->
			<div v-if="$store.state.publishCommonBody.demand.split(',').map(Number).includes(Demand.QINGGUAN)"
				class="bg-white rounded-26 p-20 mb-20" :class="{ 'op': !qingCity.status }" v-for="item in 1">
				<div class="between">
					<div class="flex">
						<switch :checked="qingCity.status" @change="e => {
							qingCity.status = e.detail.value;
						}" color="#60E089" style="transform: scale(.7);margin-left: -15rpx;" />
						<div class="font-bold">{{$t('清关')}}
							<text class="fz22 text-red ml-10" v-if="!qingCity.status">({{$t('已禁用')}})</text>
						</div>
					</div>

					<!-- <div class="fz28  pt-10 pb-10 pl-30 pr-30 bg-primary text-white rounded-40 relative"
						style="position: relative;">
						<citySelect :text="qingCity.label" @confirm="e => {
							qingCity.id = e.column3.value;
							qingCity.label = e.column1.label + '-' + e.column2.label + '-' + e.column3.label;
						}" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;" />
						{{ qingCity.label ? $t('重新选择') : $t('选择城市') }}
					</div> -->

					<city is_all="true" :value="qingCity.id" @change="e => {
						qingCity.id = e.column3.value;
						qingCity.label = e.column2.value == -1 || e.column3.value == -1 ?
									[e.column1.label, e.column2.label.replace('全部', ''), e.column3.label.replace('全部', '')].filter(item => item).join(',') :
									e.column3.label;
					}">
						<div class="fz28  pt-10 pb-10 pl-30 pr-30 bg-primary text-white rounded-40 relative"
							style="position: relative;">
							{{ qingCity.label ? $t('重新选择') : $t('选择城市') }}
						</div>
					</city>

				</div>
				<div style="height: 1rpx;background-color: #F0F0F0;margin: 20rpx 0;"></div>
				<div class="flex fz28 text-333">
					{{ qingCity.label }}
					<!-- {{ qingCity.id }} {{ qingCity.status }} -->
				</div>
			</div>

			<div class="bg-white rounded-26 p-20 mb-20 between" @click="testShow = true">
				<div class="fz28 text-555 flex center w-full">
					<image src="/static/icon/add.png" v-if="!$store.state.publishCommonBody.clearance_id"
						mode="widthFix" class="w-30 mr-10 mt-3" />
					<image src="/static/icon/edit.png" v-else mode="widthFix" class="w-30 mr-10 mt-3" />
					<span class="text-blue-2" v-if="$store.state.publishCommonBody.clearance_id">{{$t('编辑货物通关信息')}}</span>
					<span v-else>{{$t('补充货物通关信息')}}</span>
				</div>
			</div>

			<div style="height: 200rpx;"></div>
			<!-- 确定表单 -->
			<div class="form-control p-30 bg-white">
				<div class="submit center h-100 bg-primary text-white fz32 rounded-50" @click="submit">
					{{$t('确定')}}
				</div>
			</div>

		</view>
	</view>
</template>


<style>
.op {
	opacity: 0.5;
}

.add:active {
	background-color: #f5f5f5;
}

page {
	background-color: #F6F7FB;
}

.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
	background: #fff;
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 18rpx;
}

.form-control {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 9;
}
</style>